<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
  <style>
     #box{
       width: 200px;
       height: 200px;
       background-color: pink;
     }
  </style>
</head>
<body>

<!--
    事件修饰符
      事件分类：
         1.  鼠标事件
             单击  click  双击 dbClick
         2.  键盘事件
             keyDown  keyUp  keyPress
  事件的冒泡行为
        通过事件修饰符进行解决
        .stop     停止事件冒泡
        .self    只监听自己的事件行为
        .prevent   阻止事件的默认行为
        .once      事件一次有效
 键盘事件修饰符
      @keyup
      .enter      enter键的弹起
      .space
      .left
      .right
      .up
      .down
      .delete

-->

<div id="app">

  <div id="box" @click.self="clickBox">
      <button @click="clickBtn">点击试试</button>
      <button @click.once="clickBtn">点击试试2</button>
  </div>
  <a href="http://www.baidu.com" @click.prevent.once="toHref">baidu</a>

  <br>
  <input type="text" placeholder="请输入内容"  v-model="info"  @keyup.enter="showInfo">
</div>

<script>
  let vm = new Vue({
      el:'#app',
      data:{
        info:''
      },
      methods:{
        clickBox(){
          console.log("box")
        },
        clickBtn(){
          console.log("btn")
        },
        toHref(){
          console.log("a")
        },
        showInfo(){
          console.log("info="+this.info)
        }
      }
    })
</script>
</body>
</html>